<template>
	<view>
	    <!-- 公共组件-每个页面必须引入 -->
	    <public-module></public-module>
		<div class="goodsEvaluate-page">

			<u-sticky bgColor="#fff">
				<!-- <u-tabs class="utabsStyle" :list="tabs" lineColor="#FF5E01" :is-scroll="false" :activeStyle="{color: '#FF5E01'}" :current="current" @change="changeTab">
				</u-tabs> -->
				<div class="goods-info-title">
					<div :class="{'cut-title':cutIndex==1}" @click="changeTab('',1)">全部({{ allNum }})</div>
					<div :class="{'cut-title':cutIndex==2}" @click="changeTab('high',2)">好评({{ highNum }})</div>
					<div :class="{'cut-title':cutIndex==3}" @click="changeTab('middle',3)">中评({{ middleNum }})</div>
					<div :class="{'cut-title':cutIndex==4}" @click="changeTab('low',4)">差评({{ lowNum }})</div>
				</div>
		    </u-sticky>

			<div class="goodsEvaluate-list-div">
			    <div v-if="total > 0">
					<div class="goods-item" v-for="(item,index) in list" :key="index">
						<div class="evaluate-top">
							<img :src="item.userHeader" style="width:33px;height:33px;border-radius: 50%;object-fit: contain;vertical-align:middle;"/>
							<div class="user-info">
								<div class="user-name">
									<span style="margin-right:10px;">{{item.userName}}</span>
									<u-rate v-model="item.averageScore" active-color="#FF4600"></u-rate>
								</div>
								<div class="time">{{item.evaluateTime}}</div>
							</div>
						</div>
						<div class="goods-name">
							<span>{{item.goodsSn}}</span>
						</div>
						<div class="evaluate-text">
							{{item.evaluateContent}}
						</div>
						<div class="evaluate-img">
							<img :src="cc" v-for="(cc,ii) in item.evaluatePics" :key="ii" class="evaluate-img-item" @click="preview(item.evaluatePics,ii)"/>
						</div>
					</div>
				</div>
		    </div>

			<div style="padding-bottom:40rpx;">
			   <u-loadmore :status="status"></u-loadmore>
			</div>

           
        </div>
	</view>
</template>

<script>
import { getEvaluateListAPI,getEvaluateNumAPI } from '@/config/goods.js';
const defaultListQuery = {
    goodsId: '',
	scoreType: "", //评价类型，高-high，中-middle，低-low
	pageNum: 1,
	pageSize: 10,
}
export default {
    name: 'goodsEvaluate',
    data() {
        return {
            listQuery:JSON.parse(JSON.stringify(defaultListQuery)),
			goodsId: '',
			list: [],
			total: 0,
			status: 'loadmore',
			cutIndex: 1,
			allNum: '',
			highNum:'',
			middleNum:'',
			lowNum:'',


			
			tabs: [
				{key:'',name:'全部'},
				{key:'high',name:'好评'},
				{key:'middle',name:'中评'},
				{key:'low',name:'差评'},
			],
			current:0,
        }
    },
    async onLoad(options) {
        await this.$onLaunched;
        this.goodsId = options.goodsId;
		this.getEvaluateList();
		this.getEvaluateNum();
	},
	onReachBottom() {
		if(this.list.length >= this.total) {
			this.status = 'nomore';
			return ;
		}
		this.listQuery.pageNum = ++this.listQuery.pageNum;
		this.getEvaluateList()
	},
	methods: {
		//获取评价条数
		getEvaluateNum() {
			getEvaluateNumAPI({
				goodsId:this.goodsId
			}).then((res) => {
				this.highNum = res.highNum;
				this.middleNum = res.middleNum;
				this.lowNum = res.lowNum;
				this.allNum = res.highNum + res.middleNum + res.lowNum;
			})
		},
		//图片预览
		preview(urlArray, index) {
			uni.previewImage({
				urls: urlArray,
				current: index
			})
		},
		//清除数据
		clearData(){
			this.listQuery.pageNum = 1;
			this.list = [];
			this.status = 'loadmore';
			this.total = 0
		},
		changeTab(key,cutIndex){
			this.listQuery.scoreType = key;
			this.cutIndex = cutIndex;
			this.clearData();
			this.getEvaluateList();
		},
	   //获取商品评价列表
        getEvaluateList(){
            const data = JSON.parse(JSON.stringify(this.listQuery));
			data.goodsId = this.goodsId;
			this.status = 'loading';
			getEvaluateListAPI(data).then((res) => {
				this.list = this.list.concat(res.list);
				this.total = res.count;
				if(this.list.length >= this.total) {
					this.status = 'nomore';
				}else{
					this.status = 'loadmore';
				}
			}).catch(()=>{
				this.status = 'loadmore';
			})
		},
    },

};
</script>

<style lang="scss">
.goodsEvaluate-page{
	background: #F8F8F8;
	min-height:100%;
	.goods-info-title{
		height: 80rpx;
		line-height: 80rpx;
		font-size: 28rpx;
		color: #333;
		display: flex;
		justify-content: space-around;
		align-items: center;
		background: #fff;
	}
	.goods-info-title .cut-title{
		font-weight: bold;
		position: relative;
	}
	.goods-info-title .cut-title::after{
		content: ' ';
		position: absolute;
		bottom:0px;
		width:60rpx;
		left:50%;
		margin-left:-30rpx;
		height: 6rpx;
		border-radius: 20%;
		background:#FF7800;
		display: block;
	}
	.goodsEvaluate-list-div{
		margin-top:8px;
		.goods-item{
			background: #fff;
			padding:16px;
			border-bottom:1px solid #eee;
			.evaluate-top{
				display: flex;
				justify-items: flex-start;
				align-items: center;
				.user-info{
					padding-left:10px;
					.user-name{
						display: flex;
						font-size: 12px;
						line-height: 20px;
						color: #333333;
					}
					.time{
						font-size: 10px;
						line-height: 18px;
						color: #D4D4D4;
					}
				}
			}
			.goods-name{
				font-size: 14px;
				line-height: 20px;
				color: #A7A7A7;
				margin-top:10px;
				
			}
			.evaluate-text{
				font-size: 14px;
				line-height: 20px;
				color: #040404;
				margin-top:10px;
			}
			.evaluate-img{
				width:100%;
				display: flex;
				flex-wrap: wrap;
				.evaluate-img-item{
					margin-top:10px;
					margin-right:10px;
					width:75px;
					height:75px;
					object-fit: cover;
				}
			}
		}
	}
}

</style>